<template>
    <div class="submitimgwapper">
    <a-modal
            :visible="addhotelpicVisible"
            title="修改酒店图片"
            cancelText="取消"
            okText="确定"
            @cancel="cancel"
            @ok="handleSubmit"
    >
        <a-upload-dragger
                name="file"
                list-type="picture"
                :action="'http://localhost:8080/api/hotel/uploadImg/'+hotelId"
                :before-upload="beforeUpload"
                @change="handleChange"
        >
            <p class="ant-upload-drag-icon">
                <a-icon type="inbox" />
            </p>
            <p class="ant-upload-text">
                点击或拖拽文件进行上传
            </p>
            <p class="ant-upload-hint">
                Support for a single or bulk upload. Strictly prohibit from uploading company data or other
                band files
            </p>
        </a-upload-dragger>
    </a-modal>
    </div>
</template>
<script>
    import {mapActions, mapGetters, mapMutations} from "vuex";
    export default {
        name: "addHotelPictureModel",
        props: [
            'hotelId',
        ],
        data() {
            return {

            };
        },
        computed: {
            ...mapGetters([
                'addhotelpicVisible',
            ]),
        },
        methods: {
            ...mapMutations([
                'set_addhotelpicVisible'
            ]),
            handleChange(info) {
                const status = info.file.status;
                if (status === 'done') {
                    this.$message.success(`图片上传成功`);
                } else if (status === 'error') {
                    this.$message.error(`图片上传失败`);
                }
            },
            beforeUpload(file) {

                const isLt2M = file.size < 1048576;
                if (!isLt2M) {
                    this.$message.error('图片过大!');
                }
                return  isLt2M;
            },
            cancel(){
                this.set_addhotelpicVisible(false)
            },
            handleSubmit(e) {
                e.preventDefault();
                this.set_addhotelpicVisible(false)
            },
        },
    };

</script>

<style scoped lang="less">
    /* you can make up upload button and sample style by using stylesheets */
    .ant-upload-hint{
        padding-left: 20px;
        padding-right: 20px;
    }
    .ant-upload-select-picture-card i {

        width: 300px;
        height: 120px;
        font-size: 32px;
        color: #999;
    }

    .picturedisplay {

    }
    .ant-upload-list-picture-card  {

        width: 400px;
        height: 200px;
    }
    .ant-upload-list-item{
        width: 400px;
        height: 200px;
    }

    .ant-upload-list-picture-card-container{
        width: 400px;
        height: 200px;
    }
    .ant-upload-select-picture-card .ant-upload-text {
        margin-top: 8px;
        font-size: 20px;
        color: #492929;

    }
</style>